---
title: gluestack-ui Fonts | Loading and applying fonts in gluestack-ui

description: This shows how we can apply fonts in gluestack-ui in Next.js and Expo projects.

pageTitle: Fonts

pageDescription: This shows how we can apply fonts in gluestack-ui in Next.js and Expo projects.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="ui/Guides/Advanced/Fonts" />

# Fonts

When you want to use a specific font in your application, you have to follow two steps to make it work.

1. Load the font in your application
2. Apply the font in your application

## Loading fonts

For this section, we will focus on loading fonts from [Google](https://fonts.google.com/)

### For Expo projects

To load **Google fonts** in Expo, we have to install `expo-font` & follow following steps:

1. Install `expo-font` package.

```bash
npx expo install expo-font
```

2. Import `useFonts` function from `expo-font` package.

```bash
import { useFonts } from 'expo-font';
```

3. Install the font you want to use from `expo-google-fonts` in your application, for example, `Inter` font.

```bash
npx expo install @expo-google-fonts/inter
```

4. Import the font from `expo-google-fonts` package, for example, `Inter` font.

Check [this](https://github.com/expo/google-fonts/) for all the available fonts.

```bash
import {
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_900Black, } from "@expo-google-fonts/inter";
```

5. Load the font in your application.

```jsx
const [fontsLoaded] = useFonts({
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_900Black,
});
```

To load **local-fonts** in Expo application, we have to follow following steps:

1. Download the font files and add them to the `assets` folder.
2. Install `expo-font` package.

```bash
npx expo install expo-font
```

3. Import `useFonts` function from `expo-font` package.

```bash
import { useFonts } from 'expo-font';
```

4. Load the font in your application.

```bash
 const [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });
```

### For Next.js projects

To load **google-fonts** in Next.js application, we have to follow following steps:

1. Go to [Google Fonts](https://fonts.google.com/) and select the font you want to use in your application.
2. Click on the font and select the font weight and style you want to use.
3. Click on the `+` icon to add the font to your project.
4. Click on the `Select this style` button.
5. Click on the `Embed` button.
6. Copy the `@import` link and paste it in the `global.css` file in the `styles` folder.
   or
   Copy the style link embeds and paste it in the `Head` tag in the `_document.tsx` or `index.tsx` file.

To load **local-fonts** in Next.js application, we have to follow following steps:

1. Download the font files and add them to the `public/assets` folder.
2. Add the css to attach font files to the font family in the `global.css` file in the `styles` folder.

```css
@font-face {
  font-family: 'inter';
  src: url('/assets/inter/Inter-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'inter';
  src: url('/asset/inter/Inter-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
```

## Applying fonts in your application

You already have the font loaded in your application, now you can apply the font in your application.
Add the font name in the `gluestack.config.js` file in the `fonts` object. If you are confused where to find the fonts config object? Please go through [this](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens) documentation (specifically the typography section).

```js
fonts: {
  heading: "inter", // Heading component uses this by default
  body: "inter", // Text component uses this by default
  mono: "monospace",
},
```

## Advanced concepts for fonts in gluestack-ui

In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](/style)
This package provides a simple way to use fonts using the FontResolver plugin.

```js
import { FontResolver } from '@gluestack-style/react';

// const fontMapper = (style: any) => {
// };

export const config = {
  aliases: {},
  tokens: {},
  plugins: [
    new FontResolver({
      // mapFonts: fontMapper,
    }),
  ],
};

const StyledText = styled(Text, {
  fontFamily: 'Inter',
  fontWeight: 400,
  fontStyle: 'regular',
  fontSize: '$xl',
});
```

You can use the `styled` function to style your components. For gluestack-ui components, we have used this styled function to style the components.

Similarly, we can pass font styles to any component and then use the returned component (with font styles added).
